<template>
    <div class="asset">
        <div class="select" @click="showPicker">{{selectedText}}</div>
        <picker @select="handleSelect(1,arguments)" :data="getYMD2" :selected-index="selectIndex"
                ref="pickerDate" @change="handleChange" title="请选择日期" cancelTxt="取消"
                confirmTxt="确定"></picker>
    </div>
</template>
<script>
  import Picker from '../components/e-picker'

  function createYear (y, step) {
    let arr = [y]
    for (let i = 1; i <= step; i++) {
      arr.unshift(y - i)
      arr.push(y + i)
    }
    return arr
  }

  function getAllDate (y, m) {
    // console.log('--y,m--', y, m)
    let date = new Date(`${y}/${m}/01`)
    date.setMonth(date.getMonth() + 1)
    date.setDate(0)
    let all = date.getDate()
    let arr = []
    for (let i = 1; i <= all; i++) {
      arr.push(i)
    }
    return arr
  }
  function getYear () {
    let date = new Date()
    return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
  }
  export default {
    name: 'asset',
    components: {
      Picker
    },
    data: function () {
      return {
        selectIndex: [10, new Date().getMonth(), new Date().getDate() - 1],
        selectedText: getYear(),
        dateIndex: [10, new Date().getMonth()],
      }
    },
    created: function () {}, // 创建时
    beforeMount: function () {}, // 挂载之前
    mounted () {}, // 挂载之后
    beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
    updated: function () {}, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {}, // 实例销毁后调用
    watch: {
      getYMD2 () {
        this.$refs.pickerDate.refresh()
      }
    },
    computed: {
      getYMD2 () {
        let str = this.dateIndex
        // console.log('--str--', str)
        const step = 10
        let y = this.dateIndex[0] + new Date().getFullYear() - step
        let m = this.dateIndex[1]
        let arr = []
        let data1 = createYear(new Date().getFullYear(), step).map(v => ({text: v, value: v}))
        arr.push(data1)
        let data2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(v => ({text: v, value: v}))
        arr.push(data2)
        let data3 = getAllDate(y, m + 1).map(v => ({text: v, value: v}))
        arr.push(data3)
        // console.log('--arr--', arr)
        return arr
        // return `${y}-${m}-${d}`
      }
    },
    methods: {
      showPicker () {
        let picker = this.$refs.pickerDate
        picker.setData(this.getYMD2)
        picker.show()
      },
      handleSelect (index, args) {
        // console.log('--index,args--', index, args)
        let str = args[2][0] + '年' + args[2][1] + '月' + args[2][2] + '日'
        this.selectedText = str
      },
      handleChange (i, newIndex) {
        // console.log('--i,newIndex--', i, newIndex)
        if (i === 0 || i === 1) {
          this.dateIndex.splice(i, 1, newIndex)
        }
        // console.log('--this.dateIndex--', this.dateIndex)
      }
    } // 函数
  }
</script>
<style lang='scss'>
    .asset {
        box-sizing: border-box;
        h2 {
            max-height: 300px;
            overflow: scroll;
        }
        .select {
            margin: 0 10px 40px 10px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #e5e5e5;
            text-align: center;
            background: #fff;
        }
    }
</style>
